import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import '@/base/scss/common.scss'
import './magnetic.scss'
import Vue from 'vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui'
import UnifyHeader from '@/components/header/header'
import UnifyFooter from '@/components/footer/footer'
import Suspension from 'components/suspension/suspension'
import mixins from '@/mixins'
import Api from '@/api.js'
import Utils from '../../components/component/util'
import {DEVELOPMENT, PRODUCTION} from "../../config"

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

Vue.use(VueAxios, Axios)
Vue.mixin(mixins)
Vue.use(ElementUI)
Vue.use(Utils)  // 工具函数

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showSuspensionHeight: 0, // 显示悬浮组件的高度
    customizationItem: 'border',
    category: '',
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    drawData: {borders: [], sizes: []},
    drawCoreData: {sizes: []},
    cache: {},
    currentSelect: {
      type: 0,
      size1: {},
      border1: {code: 0},
      price1: 0,
      size2: {},
      border2: {code: 0},
      price2: 0
    },
    border1: 0,
    size1: 0,
    size2: 0,
    drawSelection: false,
    drawCoreSelection: false,
    skuCode: '',
    skuId: ''
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
      return true
    },
    suspendPullDown: function (type) {
      this.customizationItem = type
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    changeOption: function () {
      this.dynamicAlterUrl({
        border1: this.border1,
        size1: this.size1,
        size2: this.size2
      })
      return true
    },
    select: function (type, size, border, isDefault) {
      let newVal = {type: type}
      if (size) {
        newVal[`size${type}`] = size
      }
      if (border) {
        newVal[`border${type}`] = border
      }
      if (!isDefault && type === 1 && !this.drawSelection) {
        this.drawSelection = true
      }
      if (!isDefault && type === 2 && !this.drawCoreSelection) {
        this.drawCoreSelection = true
      }
      this.currentSelect = Object.assign({}, this.currentSelect, newVal)
      let category = type === 1 ? 'citiehua' : 'citiehuaxin'
      let parameter = `${category}.${this.currentSelect[`size${type}`].code}.${this.currentSelect[`border${type}`].code}`
      this.skuCode = parameter
      if (!this.cache[parameter]) {
        this.currentSelect[`price${type}`] = 0
        this._querySku(category, parameter)
      } else {
        this.currentSelect[`editImageUrl${type}`] = this.cache[parameter][`editImageUrl${type}`]
        this.currentSelect[`price${type}`] = this.cache[parameter][`price${type}`]
        this.currentSelect[`previewImageUrl${type}`] = this.cache[parameter][`previewImageUrl${type}`]
      }
      return true
    },
    drawCoreFill: function (res) {
      this.drawCoreData = {
        sizes: res.data.attributes[0].attributeValues
      }
      this.select(2, this.drawCoreData.sizes[this.size2], 0, !this.size2)
    },
    drawFill: function (res) {
      this.drawData = {
        borders: res.data.attributes[0].attributeValues,
        sizes: res.data.attributes[1].attributeValues
      }
      let size = this.drawData.sizes[this.size1]
      let border = this.drawData.borders[this.border1]
      this.select(1, size, border, !this.border1 && !this.size1)
    },
    /**
     * 获取 磁铁画、磁铁画芯 套餐
     * @private
     */
    _queryAttributes: function (category, fun) {
      Api.sku.queryAttributes({
        category: category
      }).then(res => {
        fun(res)
      })
    },
    _querySku: function (category, parameter) {
      let _self = this
      Api.sku.querySku({
        category: category,
        parameter: parameter
      }).then(res => {
        let type = category === 'citiehua' ? 1 : 2
        _self.currentSelect[`price${type}`] = res.data.price
        _self.currentSelect[`templateCode${category === 'citiehua' ? 1 : 2}`] = res.data.templateCode
        _self.currentSelect[`editImageUrl${category === 'citiehua' ? 1 : 2}`] = res.data.editImageUrl
        _self.currentSelect[`previewImageUrl${category === 'citiehua' ? 1 : 2}`] = `${this.picturePrefix}${res.data.previewImageUrl}`
        _self.skuId = res.data.skuId
        // 设置缓存
        _self.cache[parameter] = {}
        _self.cache[parameter][`price${type}`] = res.data.price
        _self.cache[parameter][`editImageUrl${type}`] = res.data.editImageUrl
        _self.cache[parameter][`previewImageUrl${type}`] = `${this.picturePrefix}${res.data.previewImageUrl}`
      })
    },
    urlParameterFormat: function (kv) {
      if (!kv) {
        return ''
      }
      let results = []
      for (let key in kv) {
        results.push(`${key}=${kv[key]}`)
      }
      return results.join('&')
    },
    startCustom(type, ignore) {
      if (!localStorage.getItem('userDbId')) {
        this.setUrlCallback()
        return
      }
      if (!ignore && (
          (type === 1 && !this.drawSelection) || (type === 2 && !this.drawCoreSelection)
        )
      ) {
        this.$message({
          showClose: true,
          iconClass: "atrup_Message",
          message: `请先选择您需要定制的尺寸${type === 1 ? '和框型' : ''} !`,
          type: 'success'
        })
        return
      }
      let productName = type === 1 ? '磁贴画' : '磁贴画芯'
      let category = type === 1 ? 'citiehua' : 'citiehuaxin'
      let parameter = {
        picSize: this.currentSelect[`size${type}`].code,
        size: this.currentSelect[`size${type}`].code,
        editImageUrl: this.currentSelect[`editImageUrl${type}`],
        price: this.currentSelect[`price${type}`],
        category: category,
        skuCode: this.skuCode,
        templateCode: this.currentSelect[`templateCode${type}`],
        skuId: this.skuId,
        productName: productName
      }
      if (type === 1) {
        parameter.frameType = this.currentSelect.border1.name
      }
      location.href = '/citiehua/citiehuaEdit?' + this.urlParameterFormat(parameter)
    }
  },
  watch: {
    border1() {
      this.changeOption()
    },
    size1() {
      this.changeOption()
    },
    size2() {
      this.changeOption()
    }
  },
  mounted() {
    let _self = this
    this.category = this.getQueryString('category', 'citiehua')
    this.border1 = +this.getQueryString('border1', 0)
    this.size1 = +this.getQueryString('size1', 0)
    this.size2 = +this.getQueryString('size2', 0)
    sessionStorage.setItem('urlQuery', this.category);
    ['citiehuaxin', this.category].forEach(function (item) {
      this._queryAttributes(item, item === 'citiehuaxin' ? this.drawCoreFill : this.drawFill)
    }.bind(this))
    this.$nextTick(function () {
      _self.showSuspensionHeight = _self.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    this.checkWebpFeature('lossy', function (feature, isSupport) {
      if (isSupport) {
        require('./background-webp.scss')
      } else {
        require('./background-png.scss')
      }
    })
    document.body.style.cssText = 'opacity:1;'
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  }
})
